<template>
  <div style="background-color: rgb(239, 239, 245); min-width: 1400px">
    <div class="content">
      <ul>
        <li @click="$router.push('/works')">作品</li>
        <li @click="$router.push('/album')">专辑</li>
        <li @click="$router.push('/collection')">收藏</li>
        <li @click="$router.push('/profile')" style="color: rgb(70, 210, 51)">
          资料
        </li>
        <li @click="$router.push('/honor')">荣誉</li>
      </ul>
    </div>
    <div class="profile_div">
      <div>
        <div class="profile_list1">
          <el-descriptions title="等级头衔" column="1" class="profile_title">
            <el-descriptions-item label="摄影积分">
              {{ user.user_jifen }}
            </el-descriptions-item>
            <el-descriptions-item
              label="等&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级"
            >
              {{ user.user_class }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="profile_a">
          <li @click="$router.push('/change')">
            编辑个人资料 <i class="el-icon-arrow-right"></i>
          </li>
        </div>
        <div class="profile_list2">
          <el-descriptions title="个人资料" column="1" class="profile_title">
            <el-descriptions-item
              label="昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称"
            >
              {{user.user_nickname}}
            </el-descriptions-item>
            <el-descriptions-item label="居&nbsp;&nbsp;住&nbsp;&nbsp;地">
              {{user.user_district}}
            </el-descriptions-item>
            <el-descriptions-item
              label="邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱"
            >
              {{user.user_post}}
            </el-descriptions-item>
            <el-descriptions-item label="联系手机">
              {{ user.user_tel }}
            </el-descriptions-item>
            <el-descriptions-item label="QQ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
           {{user.user_qq}}
            </el-descriptions-item>
            <el-descriptions-item label="我的装备"> {{user.user_equip}} </el-descriptions-item>
            <el-descriptions-item label="个人说明"> {{user.user_signature}} </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUser } from "@/network/user.js";
import navBar from "@/components/navBa.vue";
export default {
  components: {
    navBar,
  },
  data() {
    return {
     
      user: {
        user_nickname: "",//昵称
        user_id:'',//id
        user_district:'',//地区
        user_post:'',//邮箱
        user_equip:'',//设备
        user_signature:'',//个人介绍
        user_data:'',//出生日期
        user_qq:'',//QQ
        user_tel: "",//电话
        user_age: "",//年龄
        user_jifen: "",//积分
        user_class: "",//等级
      },
    };
  },
  methods: {},
  mounted() {
    getUser(1).then((res) => {
      this.user = res.data;
    });
    
  },
};
</script>
<style scoped lang="less">
.content {
  padding: 30px;
  background-color: white;
  border-top: 3px solid rgb(238, 238, 238);
  border-bottom: 1px solid rgb(238, 238, 238);
  ul {
    width: 800px;
    list-style: none;
    margin-left: 15%;
    li {
      font-size: 14px;
      position: relative;
      top: -20px;
      left: 30%;
      float: left;
      margin-left: 40px;
    }
  }
  div {
    span {
      font-size: 1px;
    }
  }
}
.profile_div {
  margin: 50px 150px;
  margin-bottom: 100px;
  background-color: white;
  .profile_list1 {
    padding: 50px 100px;
    /deep/.el-descriptions__title {
      font-size: 30px;
      font-weight: 350;
    }
    /deep/.el-descriptions__content{
      margin-left: 50px;
    }
    .profile_title {
      
      /deep/.el-descriptions__content {
        padding-left: 100px;
        line-height: 40px;
      }
    }
    div {
      font-size: 15px;
    }
  }
  .profile_a {
    position: relative;
    li {
      list-style: none;
      font-size: 17px;
      position: absolute;
      top: 10px;
      left: 70%;
      text-decoration: none;
      color: rgb(70, 210, 51);
      i {
        font-size: 17px;
        font-weight: 600;
        margin: 0px 5px;
      }
    }
  }
  .profile_list2 {
    padding-left: 100px;
    /deep/.el-descriptions__title {
      font-size: 30px;
      font-weight: 350;
    }
    .profile_title {
      /deep/.el-descriptions__content{
      margin-left: 50px;
    }
      /deep/.el-descriptions__content {
        padding-left: 100px;
        line-height: 40px;
      }
    }
    div {
      font-size: 15px;
      padding-bottom: 50px;
    }
  }
}
</style>